<template>
  <div class="rate-limiter-config">
    <el-card>
      <template #header>
        <div class="card-header">
          <h2>限流配置</h2>
          <div class="header-actions">
            <el-button
                type="primary"
                :loading="saving"
                @click="handleSave"
            >
              保存配置
            </el-button>
          </div>
        </div>
      </template>

      <el-form
          ref="configForm"
          :model="configData"
          :rules="rules"
          label-width="180px"
      >
        <el-form-item
            label="每个域名最大并发数"
            prop="maxConcurrentPerDomain"
        >
          <el-input-number
              v-model="configData.maxConcurrentPerDomain"
              :min="1"
              :max="5"
          />
          <span class="form-tip">建议值: 1-2，避免对同一网站发送过多并发请求</span>
        </el-form-item>

        <el-form-item
            label="总体并发数"
            prop="globalConcurrent"
        >
          <el-input-number
              v-model="configData.globalConcurrent"
              :min="1"
              :max="10"
          />
          <span class="form-tip">建议值: 3-5，控制系统整体并发量</span>
        </el-form-item>

        <el-form-item
            label="最小间隔(毫秒)"
            prop="minInterval"
        >
          <el-input-number
              v-model="configData.minInterval"
              :min="1000"
              :max="10000"
              :step="1000"
          />
          <span class="form-tip">最小请求间隔时间</span>
        </el-form-item>

        <el-form-item
            label="最大间隔(毫秒)"
            prop="maxInterval"
        >
          <el-input-number
              v-model="configData.maxInterval"
              :min="1000"
              :max="15000"
              :step="1000"
          />
          <span class="form-tip">最大请求间隔时间</span>
        </el-form-item>

        <el-form-item
            label="域名间隔(毫秒)"
            prop="domainInterval"
        >
          <el-input-number
              v-model="configData.domainInterval"
              :min="1000"
              :max="10000"
              :step="1000"
          />
          <span class="form-tip">同一域名的请求间隔</span>
        </el-form-item>
      </el-form>

      <!-- 配置说明 -->
      <el-alert
          class="config-tips"
          title="配置说明"
          type="info"
          :closable="false"
      >
        <template #default>
          <ul class="tips-list">
            <li>每个域名最大并发数：控制对单个网站的并发请求数</li>
            <li>总体并发数：控制系统整体的并发请求数</li>
            <li>最小间隔：随机延迟的最小值</li>
            <li>最大间隔：随机延迟的最大值</li>
            <li>域名间隔：同一域名两次请求之间的最小间隔</li>
          </ul>
        </template>
      </el-alert>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRateLimiterStore } from '@/stores/adminRateLimiter'

const store = useRateLimiterStore()
const configForm = ref(null)
const saving = ref(false)

// 表单数据
const configData = reactive({
  maxConcurrentPerDomain: 1,
  globalConcurrent: 3,
  minInterval: 3000,
  maxInterval: 8000,
  domainInterval: 3000
})

// 验证规则
const rules = {
  maxConcurrentPerDomain: [
    { required: true, message: '请输入每个域名最大并发数', trigger: 'blur' },
    { type: 'number', min: 1, max: 5, message: '值必须在1-5之间', trigger: 'blur' }
  ],
  globalConcurrent: [
    { required: true, message: '请输入总体并发数', trigger: 'blur' },
    { type: 'number', min: 1, max: 10, message: '值必须在1-10之间', trigger: 'blur' }
  ],
  minInterval: [
    { required: true, message: '请输入最小间隔', trigger: 'blur' },
    { type: 'number', min: 1000, max: 10000, message: '值必须在1000-10000之间', trigger: 'blur' }
  ],
  maxInterval: [
    { required: true, message: '请输入最大间隔', trigger: 'blur' },
    { type: 'number', min: 1000, max: 15000, message: '值必须在1000-15000之间', trigger: 'blur' }
  ],
  domainInterval: [
    { required: true, message: '请输入域名间隔', trigger: 'blur' },
    { type: 'number', min: 1000, max: 10000, message: '值必须在1000-10000之间', trigger: 'blur' }
  ]
}

// 加载配置
const loadConfig = async () => {
  try {
    await store.fetchConfig()
    Object.assign(configData, store.config)
  } catch (error) {
    ElMessage.error('加载配置失败')
  }
}

// 保存配置
const handleSave = async () => {
  if (!configForm.value) return

  await configForm.value.validate(async (valid) => {
    if (valid) {
      saving.value = true
      try {
        // 验证区间
        if (configData.minInterval >= configData.maxInterval) {
          ElMessage.error('最小间隔必须小于最大间隔')
          return
        }

        // 验证并发数
        if (configData.maxConcurrentPerDomain > configData.globalConcurrent) {
          ElMessage.error('单域名并发数不能大于总体并发数')
          return
        }

        await store.updateConfig(configData)
        ElMessage.success('保存成功')
      } catch (error) {
        ElMessage.error('保存失败')
      } finally {
        saving.value = false
      }
    }
  })
}

onMounted(() => {
  loadConfig()
})
</script>

<style scoped>
.rate-limiter-config {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-tip {
  margin-left: 10px;
  color: #909399;
  font-size: 14px;
}

.config-tips {
  margin-top: 20px;
}

.tips-list {
  margin: 10px 0;
  padding-left: 20px;
}

.tips-list li {
  line-height: 1.8;
}
</style>